<template>
  <div class="nav">
    <li v-for="(content, index) in props.indexContent" :key="index">
      <a>{{ content }}</a>
    </li>
  </div>
</template>


<script lang="ts" setup>
const props = defineProps({
  /* 此属性表示传入的目录栏目
  左边表示文章列表，右边表示此文章的目录
  
  */
  indexContent: {
    type: Array as () => string[],
    required: true,
  },
});
</script>

<style scoped>
li {
  list-style-type: none;
  padding: 10px;
  border: solid 1px gray;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

li:hover {
  color: white;
  background-color: grey;
}
</style>